<template>
  <view class="flex-col page">
    <view class="flex-col justify-start items-end image-wrapper">
      <image class="image"
        src="http://ts.ysgzt.cn/static/images/wechat/resources/de63ffa496c189af93b9ca27844fe602.png" />
    </view>
    <view class="flex-col group">
      <view class="flex-row justify-between items-center section">
        <view class="flex-col items-start">
          <text class="font text text_2">当前余额</text>
          <text class="text text_4 mt-15">￥125,230</text>
        </view>
        <view class="flex-col justify-start items-center text-wrapper">
          <text class="font_2 text text_3">提现</text>
        </view>
      </view>
      <view class="mt-10 flex-col section_2">
        <text class="self-start font_2 text text_5">余额明细</text>
        <view class="flex-row justify-between self-stretch group_2">
          <view class="flex-row items-center">
            <text class="font_2 text">提现</text>
            <text class="font text ml-14-5">2022.02.12</text>
          </view>
          <text class="font_3 text text_6">-2000元</text>
        </view>
        <view class="flex-row justify-between self-stretch group_3 view">
          <view class="flex-row items-center">
            <text class="font_2 text">佣金收入</text>
            <text class="font text ml-14-5">2022.02.12</text>
          </view>
          <text class="font_4 text text_7">+2000元</text>
        </view>
        <view class="flex-row justify-between self-stretch group_4">
          <view class="flex-row items-center">
            <text class="font_2 text">提现</text>
            <text class="font text ml-14-5">2022.02.12</text>
          </view>
          <text class="font_3 text text_8">-2000元</text>
        </view>
        <view class="flex-row justify-between self-stretch group_3">
          <view class="flex-row items-center">
            <text class="font_2 text">佣金收入</text>
            <text class="font text ml-14-5">2022.02.12</text>
          </view>
          <text class="font_4 text text_7">+2000元</text>
        </view>
        <view class="flex-row justify-between self-stretch group_5">
          <view class="flex-row items-center">
            <text class="font_2 text">提现</text>
            <text class="font text ml-14-5">2022.02.12</text>
          </view>
          <text class="font_3 text text_9">-2000元</text>
        </view>
        <view class="flex-row justify-between self-stretch group_3">
          <view class="flex-row items-center">
            <text class="font_2 text">佣金收入</text>
            <text class="font text ml-14-5">2022.02.12</text>
          </view>
          <text class="font_4 text text_7">+2000元</text>
        </view>
        <view class="flex-row justify-between self-stretch group_4">
          <view class="flex-row items-center">
            <text class="font_2 text">提现</text>
            <text class="font text ml-14-5">2022.02.12</text>
          </view>
          <text class="font_3 text text_8">-2000元</text>
        </view>
        <view class="flex-row justify-between self-stretch group_6">
          <view class="flex-row items-center">
            <text class="font_2 text">佣金收入</text>
            <text class="font text ml-14-5">2022.02.12</text>
          </view>
          <text class="font_4 text text_10">+2000元</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },

  methods: {},
};
</script>

<style scoped lang="scss">
.ml-14-5 {
  margin-left: 29rpx;
}

.mt-15 {
  margin-top: 30rpx;
}

.page {
  background-color: #00000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .image-wrapper {
    padding: 34rpx 0 21rpx;
    background-color: #ffffff;

    .image {
      margin-right: 12rpx;
      width: 671rpx;
      height: 140rpx;
    }
  }

  .group {
    padding: 20rpx 9rpx 0;

    .section {
      margin: 0 7rpx;
      padding: 39rpx 32rpx 42rpx;
      background-color: #ffffff;
      border-radius: 10rpx;

      .text_2 {
        margin-left: 6rpx;
        color: #141414;
        line-height: 23rpx;
      }

      .text_4 {
        color: #141414;
        font-size: 36rpx;
        font-family: PingFangSC;
        font-weight: 500;
        line-height: 33rpx;
      }

      .text-wrapper {
        padding: 16rpx 0;
        background-color: #00806b;
        border-radius: 29rpx;
        width: 199rpx;
        height: 58rpx;

        .text_3 {
          color: #ffffff;
        }
      }
    }

    .section_2 {
      margin-right: 14rpx;
      padding: 39rpx 22rpx 123rpx 37rpx;
      background-color: #ffffff;
      border-radius: 10rpx 10rpx 0 0;

      .text_5 {
        font-weight: 500;
        line-height: 27rpx;
      }

      .group_2 {
        margin-top: 40rpx;

        .text_6 {
          line-height: 25rpx;
        }
      }

      .group_3 {
        padding: 42rpx 0 24rpx;
        border-top: solid 3rpx #eeeeee;

        .text_7 {
          line-height: 25rpx;
        }
      }

      .view {
        margin-top: 25rpx;
      }

      .group_4 {
        padding: 33rpx 0 24rpx;
        border-top: solid 3rpx #eeeeee;

        .text_8 {
          line-height: 25rpx;
        }
      }

      .font_3 {
        font-size: 28rpx;
        font-family: PingFangSC;
        line-height: 26rpx;
        color: #000000;
      }

      .group_5 {
        padding: 34rpx 0 24rpx;
        border-top: solid 3rpx #eeeeee;

        .text_9 {
          line-height: 25rpx;
        }
      }

      .group_6 {
        padding: 42rpx 0 25rpx;
        border-top: solid 3rpx #eeeeee;
        border-bottom: solid 3rpx #eeeeee;

        .text_10 {
          line-height: 25rpx;
        }
      }

      .font_4 {
        font-size: 28rpx;
        font-family: PingFangSC;
        line-height: 26rpx;
        color: #00806b;
      }
    }

    .font_2 {
      font-size: 28rpx;
      font-family: PingFangSC;
      line-height: 26rpx;
      color: #141414;
    }

    .text {
      text-transform: uppercase;
    }

    .font {
      font-size: 24rpx;
      font-family: PingFangSC;
      line-height: 19rpx;
      color: #999999;
    }
  }
}
</style>